<template>
    <div class="right-user-content">
        <!-- <ul class="currency-list">
            <li class="currency-item">
                <div class="currency-title">下载币</div>
                <div class="currency-nums"><span class="nums-index-download">{{ userInfo.money || 0 }}</span> 个</div>
                <div class="btns">
                    <a class="btn" @click="jumpUrl('/recharge_order')">充值记录</a>
                    <a class="btn" @click="jumpUrl('/user_dowload')">下载记录</a>
                    <a class="btn solid-btn" @click="jumpUrl('/recharge')">去充值</a>
                </div>
                <svg class="icon" aria-hidden="true"
                    style="position: absolute;right: -12px;top: -12px;z-index: -1;font-size: 87px;color: #FFE5CA;">
                    <use xlink:href="#icon-youzhimaoyiqu"></use>
                </svg>
            </li>

        </ul> -->
        <div class="third-box">
            <div class="my-material">
                <div class="title-activities clearfix">
                    <span>我的素材</span>
                    <p class="tab-material clearfix">
                        <a @click="switchClick('history')" :class="activeStr == 'history' ? 'active' : ''">足迹</a>
                        <a @click="switchClick('collect')" :class="activeStr == 'collect' ? 'active' : ''">收藏</a>
                        <a @click="switchClick('dowload')" :class="activeStr == 'dowload' ? 'active' : ''">下载</a>
                    </p>
                    <span class="see-record"></span>
                </div>
                <div class="list-model-content">
                    <div class="model-related" v-if="allList.length > 0">
                        <ul class="related-list-model clearfix">
                            <li class="list-model-lis" v-for="(item, index) in allList" :key="index">
                                <div class="list-model-rec">
                                    <a @click="productDetailClick(item.product.id, item.product.ascription)"><img
                                            :src="item.product.full_url" :title="item.product.title"
                                            @error.once="useDefaultImage" :alt="item.product.title">
                                    </a>
                                </div>
                                <div class="mod-title">{{ item.product.title }}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="model-related" v-else>
                        <ul class="related-list-model clearfix">
                        </ul>
                        <div class="not-yet-data not-data">
                            <el-empty description="暂无数据">
                                <div class="not-data-tips">前往<a href="/" target="_blank">首页</a>逛逛吧</div>
                            </el-empty>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue';
import { collAndHisAndDowlond } from '../../api/user/index'
import { encrypt, DEFAULTKEY } from '../../utils/keyEnum'
import { useUserInfo } from '../../stores/userInfo'
import router from '../../router'
const userInfo = useUserInfo() //获取用户信息


import { useSiteConfig } from '../../stores/siteConfig'
const siteConf = useSiteConfig()

const useDefaultImage = (event: any) => {
    event.target.src = siteConf.defalut_product_img
}

const allList = ref<any>([]);
//足迹
const myHistoryList = () => {
    collAndHisAndDowlond({ type: activeStr.value }).then((res: any) => {
        if (res.code == 1) {
            allList.value = res.data.list
        }
    })
}
const jumpUrl = (url: any) => {
    router.push({ path: url })
}
//详情
const productDetailClick = (id: number, ascription: any) => {

    const queryToAse = encrypt({
        product_id: id,
        ascription: ascription
    }, DEFAULTKEY)
    nextTick(() => {
        const resolvedRoute = router.resolve({
                    name: '/product-detail',

                    query: { value: queryToAse }

                    });

                    window.open(resolvedRoute.href, '_blank');
        //router.push({ name: '/product-detail', query: { value: queryToAse } })
    });

}
const activeStr = ref('history');
const switchClick = (str: string) => {
    activeStr.value = str
    myHistoryList()
}

onMounted(() => {
    myHistoryList()
})
</script>


<style scoped>
.right-user-content {
    /* -webkit-box-flex: 1;
    -ms-flex: 1; */
    flex: 1;
}

.right-user-content .currency-list {
    display: flex;
    margin-left: -16px;
}

.right-user-content .currency-list>li {
    position: relative;
    margin-left: 16px;
    width: 254px;
    height: 156px;
    background: linear-gradient(360deg, rgba(205, 102, 6, 0) 0, rgba(248, 193, 98, .1) 100%) #FFF;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}

.right-user-content .currency-list>li .currency-title {
    position: relative;
    padding: 24px 0 0 24px;
    font-size: 18px;
    color: #1D2129;
    line-height: 22px;
    text-align: left;
    z-index: 0;
}

.right-user-content .currency-list>li .currency-title::after {
    content: "";
    position: absolute;
    top: 35px;
    left: 24px;
    width: 78px;
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 159, 112, .3) 0, rgba(254, 182, 146, .1) 100%);
    border-radius: 12px;
    z-index: -1;
}

.right-user-content .currency-list>li .currency-nums {
    margin: 41px 0;
    height: 27px;
    font-size: 16px;
    color: #1D2129;
    line-height: 22px;
}

.right-user-content .currency-list>li .currency-nums>span {
    font-size: 48px;
    font-weight: 700;
}

.right-user-content .currency-list>li .btns>a {
    position: relative;
    margin: 0 4px;
    display: inline-block;
    padding: 0 8px;
    width: auto;
    height: 24px;
    color: #e85623;
    line-height: 22px;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    opacity: 1;
    border: 1px solid #e85623;
    transition: all ease .3s;
}

.right-user-content .third-box {
    display: flex;
}

.right-user-content .my-material {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 24px;
    border-radius: 12px;
}

.right-user-content .my-material .title-activities {
    margin-bottom: 16px;
}

.clearfix {
    zoom: 1;
}

.right-user-content .my-material .title-activities span {
    display: inline-block;
    font-size: 18px;
    color: #333;
    line-height: 1;
    float: left;
}

.right-user-content .my-material .title-activities .tab-material {
    display: inline-block;
    margin-left: 10px;
    float: left;
    padding-top: 2px;
}

.right-user-content .my-material .title-activities .tab-material a:hover {
    color: #e85623;
}

.right-user-content .my-material .title-activities .tab-material a {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    position: relative;
    float: left;
    padding: 0 11px 5px;
    line-height: 1;
}

.right-user-content .my-material .title-activities .tab-material a::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #e6e6e6;
    height: 14px;
    width: 1px;
}

.right-user-content .my-material .model-related .related-list-model {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -16px;
}

.right-user-content .my-material .model-related .related-list-model .list-model-lis {
    width: 244px;
    height: 153px;
    background: #9B9595;
    border-radius: 12px;
    margin-left: 16px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 1700px) {
    .right-user-content {
        max-width: 1064px;
    }
}

@media screen and (max-width: 1700px) {
    .personal-center-content {
        width: 1344px;
    }
}

.right-user-content .my-material .model-related .related-list-model .list-model-lis .list-model-rec {
    height: 100%;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.right-user-content .my-material .model-related .related-list-model .list-model-lis a {
    width: 100%;
    height: 100%;
    display: block;
}

.right-user-content .my-material .model-related .related-list-model .list-model-lis a img {
    border-radius: 4px;
    width: 100%;
    height: 100%;
}

.right-user-content .my-material .model-related .related-list-model .list-model-lis a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
}

.right-user-content .my-material .model-related .related-list-model .list-model-lis .mod-title {
    width: 100%;
    height: 0;
    line-height: 40px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(29, 33, 41, 0)), to(rgba(29, 33, 41, .8)));
    background: linear-gradient(180deg, rgba(29, 33, 41, 0) 0, rgba(29, 33, 41, .8) 100%);
    color: #fff;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    -webkit-transition: height .5s;
    transition: height .5s;
}

.right-user-content .my-material .model-related .related-list-model .list-model-lis:hover .mod-title {
    height: 40px
}

.right-user-content .third-box .my-material {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff;
    margin-top: 20px;
    padding: 24px;
    border-radius: 12px;
}

.tab-material a.active {
    color: #e85623 !important;
}

.not-data {
    display: block;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 14px;
    color: #86909C;
    line-height: 24px;
}

.not-yet-data a {
    color: #e85623;
}
</style>